<template>
  <!--用户管理-->
  <div class="wrapper">
    <!--表格-->
    <div v-show="table">
      <Table border stripe :columns="columns" :data="data"></Table>
      <!--Vue组件-->
      <div class="page" style="padding-top: 40px">
        <paging :all="all" @returnValue="returnValue"></paging>
      </div>
    </div>

    <!--公用-->
    <div v-show="public">
      <div class="add_style">
        <span>用户名:</span>
        <Input v-model="bus.name" placeholder="" style="width: 620px"></Input>
      </div>
      <div class="add_style">
        <span>邮箱:</span>
        <Input v-model="bus.mail" placeholder="" style="width: 620px"></Input>
      </div>
      <div class="add_style">
        <span>联系方式:</span>
        <Input v-model="bus.phone" placeholder="" style="width: 620px"></Input>
      </div>
      <div class="add_style">
        <span>职称:</span>
        <Input v-model="bus.title" placeholder="" style="width: 620px"></Input>
      </div>
      <div class="add_style">
        <span>科室:</span>
        <Input v-model="bus.dept" placeholder="" style="width: 620px"></Input>
      </div>
      <div class="add_style">
        <span>用户权限:</span>
        <Select v-model="bus.rid" style="width:620px">
          <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
      </div>
      <!--编辑-->
      <div class="add_style">
        <Button size="small" type="primary" @click="save">保存</Button>
        <Button size="small" type="primary" @click="back">取消</Button>
      </div>
    </div>

    <Modal v-model="modal2" width="360">
      <div style="text-align:center">
        <p>删除不可恢复，是否确定删除？</p>
      </div>
      <div slot="footer">
        <Button type="error" size="large" long @click="notarizeRemove">删除</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  import paging from '../module/paging.vue';

  export default {
    components: {
      paging
    },
    data() {
      return {
        /*分页*/
        all: 1,
        cur: 1,
        /*查询url*/
        inquireurl: this.$api.url + '/user/selectAllUserRole/',
        URL: this.$api.url,
        /*表格*/
        columns: [
          {
            title: '用户名',
            key: 'name',
          },
          {
            title: '邮箱',
            key: 'mail',
            align: 'center',
          },
          {
            title: '联系方式',
            key: 'phone',
            align: 'center',
          },
          {
            title: '职称',
            key: 'title',
            align: 'center',
          },
          {
            title: '科室',
            key: 'dept',
            align: 'center',
          },
          {
            title: '用户权限',
            key: 'role',
            align: 'center',
            render:(h,params)=>{
              return h('span',{
              },params.row.role.name)
            }
          },
          {
            title: '操作',
            key: '操作',
            align: 'center',
            width: 180,
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.show(params.index);
                    }
                  }
                }, '编辑'),
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.remove(params.index)
                    }
                  }
                }, '删除'),
                h('i-switch', {
                  props: {
                    value: params.row.state,
                    'true-value': 0,
                    'false-value': 1
                  },
                  on: {
                    'on-change': (value) => {
                      this.changeWishStatus(value,params.row);
                    }
                  },
                  scopedSlots: {
                    open: () => h('span', '开'),
                    close: () => h('span', '关')
                  },
                },)
              ]);
            }
          },
        ],
        data: [],
        table:true,
        public:false,

        cityList: [],
        bus:{
          name: '',
          mail: '',
          phone: '',
          title: '',
          dept: '',
          rid: '',
          uid:'',
          createUser:'',
        },

        modal2: false,
        index:'',
      }
    },
    mounted() {
      window.scrollTo(0,0);
      this.bus.createUser = localStorage.getItem('ms_userid');
      this.get(this.inquireurl, this.cur);
    },
    methods: {
      /*分页*/
      returnValue(data) {
        this.cur = data;
        this.get(this.inquireurl, this.cur)
      },
      /*编辑*/
      show(index) {
        this.table = false ;
        this.public = true;
        this.bus.uid = this.data[index].id;
        this.$axios.get(this.$api.url + "/user/selectMessage/" + this.data[index].id).then((res) => {
          this.bus.name = res.data.data.name;
          this.bus.mail = res.data.data.mail;
          this.bus.phone = res.data.data.phone;
          this.bus.title = res.data.data.title;
          this.bus.dept = res.data.data.dept;
          let ulist;
          for(let i in res.data.data.ulist){
            ulist={
              value: res.data.data.ulist[i].id,
              label:res.data.data.ulist[i].name,
            };
            this.cityList.push(ulist)
          }
        });
      },
      save(){
        this.post(this.$api.url + '/user/UpUser', this.bus)
      },
      /*返回*/
      back() {
        this.$router.go(0)
      },
      /*删除*/
      remove(index) {
        this.modal2 = true;
        this.index = this.data[index];
      },
      notarizeRemove(){
        this.$axios.get(this.$api.url + "/user/delete/" + this.index.id).then((res) => {
          this.$Message.success(`删除成功!`);
          this.modal2 = false;
          this.get(this.inquireurl, this.cur)
        });
      },
      changeWishStatus(value,params){
        let data ={
          state:value,
          id:params.id,
        };
        this.$axios({
          method: 'POST',
          headers: {'Content-Type': 'application/json;charset=UTF-8'},
          data: JSON.stringify(data),
          url: this.URL+'/user/UPState',
        }).then((res) => {
        })
      },
      /*post请求*/
      post(url,data) {
        this.$axios({
          method: 'POST',
          headers: {'Content-Type': 'application/json;charset=UTF-8'},
          data: JSON.stringify(data),
          url: url,
        }).then((res) => {
          this.table = true;
          this.public = false ;
          this.get(this.inquireurl, this.cur)
        })
      },
      /*get请求*/
      get(url, cur) {
        this.$axios.get(url + cur).then((res) => {
          this.all = res.data.totalPage;
          this.data = res.data.lists;
        });
      },
    },
  }
</script>

<style scoped>
  .wrapper {
    margin: 10px;
  }

  .add_style {
    padding-bottom: 10px;
  }

  .add_style > span {
    font-size: 14px;
    font-weight: bold;
    display: inline-block;
    width: 70px;
  }
</style>
